<template>
    <show-modal :title="title" :loading="loading" width="calc(100% - 186px)" @cancel="cancel" :isCancel="false" @submit="cancel">
        <a-tabs type="card" :tabBarGutter="-1">
            <a-tab-pane key="1" tab="属性定义">
                <property-box :info="info" :property="list" :isEdit="false" :deviceCode="deviceCode" :pro-code="code" />
            </a-tab-pane>
            <a-tab-pane key="2" tab="功能定义">
                <function-box :property="list" :isEdit="false" :pro-code="code" />
            </a-tab-pane>
            <a-tab-pane key="3" tab="事件定义">
                <alarm-box :property="list" :isEdit="false" :pro-code="code" />
            </a-tab-pane>
        </a-tabs>
    </show-modal>
</template>

<script>
import PropertyBox from '@/views/components/productDetails/property';
import FunctionBox from '@/views/components/productDetails/function';
import AlarmBox from '@/views/components/productDetails/alarm';
import { remoteList } from '@/api/product/dictionary';

export default {
    name: 'productDetail',
    components: {
        PropertyBox,
        FunctionBox,
        AlarmBox
    },
    props: {
        code: String,
        deviceCode: {
            type:String || null,
            default:''
        },
        info:{
            type:Object,
            default:()=>{}
        }
    },
    data() {
        return {
            loading: false,
            title: '产品详情',
            list:[]
        };
    },
    created(){
        this.getPropertyList()
    },
    methods: {
        //关闭
        cancel() {
            this.$emit('cancel');
        },
        async getPropertyList() {
            try {
                let res = await remoteList({page:1,size:1000});
                this.list = res.data.list;
            } finally {
            }
        },
    }
};
</script>
